{include file="common:header" /}
{include file="common:side" /}
<div id="page-wrapper">
  <!-- 总数据报表管理 -->
  <!--*************************** content部分开始 ******************-->
  <div class="container-fluid" id="m_main">
    <h2 class="bg-title row box-title m-b-20">
      <div class="col-sm-12">总数据报表</div>
    </h2>
    <!-- <p class="text-muted m-b-30">Data table example</p> -->
    <div class="row">
      <div class="col-lg-3 col-sm-6 col-xs-12">
        <div class="white-box analytics-info">
          <h3 class="box-title">总浏览量</h3>
          <ul class="list-inline ta-c">
            <li><span class="text-success">{{total.views}}</span></li>
          </ul>
        </div>
      </div>
      <div class="col-lg-3 col-sm-6 col-xs-12">
        <div class="white-box analytics-info">
          <h3 class="box-title">总交易量</h3>
          <ul class="list-inline ta-c">
            <li><span class="text-purple">{{total.orders}}</span></li>
          </ul>
        </div>
      </div>
      <div class="col-lg-3 col-sm-6 col-xs-12">
        <div class="white-box analytics-info">
          <h3 class="box-title">总交易额</h3>
          <ul class="list-inline ta-c">
            <li><span class="text-info">{{total.turnover}}</span></li>
          </ul>
        </div>
      </div>
      <div class="col-lg-3 col-sm-6 col-xs-12">
        <div class="white-box analytics-info">
          <h3 class="box-title">平均播放时间</h3>
          <ul class="list-inline ta-c">
            <li><span class="text-danger">{{total.avetime}}</span></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="row m-t-20">
      <div class="col-sm-12">
        <div class="white-box">
          <div class="row">
            <div class="col-sm-3">
              <div class="form-group">
                <select class="selectpicker" data-style="form-control" v-model="iid" id="iid" @change="getList">
                  <option value="">选择行业</option>
                  <option :value="item.id" v-for="(item,index) in industryList">{{item.name}}</option>
                </select>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12 col-lg-12">
              <div class="manage-users">
                <div class="sttabs tabs-style-iconbox">
                  <nav>
                    <ul class="info">
                      <li><a href="#section-iconbox-1" class="sticon ti-star"><span>TOP10</span></a></li>
                      <li><a href="#section-iconbox-2" class="sticon ti-receipt"><span>所有商品数据</span></a></li>
                    </ul>
                  </nav>
                  <div class="content-wrap">
                    <section id="section-iconbox-1">
                      <!-- <div class="item">
                        <div class="row">
                          <div class="col-sm-9 b-r">
                            <p><span class="label label-danger m-r-10">1</span>商品名称：小米智能电视</p>
                            <p>商品品牌：小米</p>
                            <p>价格：5000.00</p>
                          </div>
                          <div class="col-sm-3 ta-r">
                            <p>总交易额：20.00万</p>
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-sm-4 b-r">
                            <p class="ta-c">浏览量（万）</p>
                            <p class="ta-c">200</p>
                          </div>
                          <div class="col-sm-4 b-r">
                            <p class="ta-c">交易量（单）</p>
                            <p class="ta-c">1000</p>
                          </div>
                          <div class="col-sm-4">
                            <p class="ta-c">播放量（次）</p>
                            <p class="ta-c">50000</p>
                          </div>
                        </div>
                      </div> -->
                      <div class="item" v-for="(item,index) in topList">
                        <div class="row">
                          <div class="col-sm-9 b-r">
                            <p><span class="label m-r-10" :class="{'label-danger':index==0,'label-warning':index==1,'label-info':index==2,'label-success':index>2}">{{index+1}}</span>商品名称：{{item.goods_name}}</p>
                            <p>商品品牌：{{item.brand_name}}</p>
                            <p>价格：{{item.price}}</p>
                          </div>
                          <div class="col-sm-3">
                            <p>总交易额：{{item.turnover}}</p>
                          </div>
                          <div class="col-sm-4">
                            <p class="ta-c">浏览量（万）</p>
                            <p class="ta-c">{{item.views}}</p>
                          </div>
                          <div class="col-sm-4">
                            <p class="ta-c">交易量（单）</p>
                            <p class="ta-c">{{item.orders}}</p>
                          </div>
                          <div class="col-sm-4">
                            <p class="ta-c">播放量（次）</p>
                            <p class="ta-c">{{item.playtimes}}</p>
                          </div>
                        </div>
                      </div>
                    </section>
                    <section id="section-iconbox-2">
                      <div class="table-responsive">
                        <table id="myTable" class="table table-striped color-table info-table">
                          <thead>
                            <tr>
                              <th>商品名称</th>
                              <th>商品品牌</th>
                              <th>价格</th>
                              <th>交易额</th>
                              <th>浏览量（万）</th>
                              <th>交易量（单）</th>
                              <th>播放量（次）</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr v-for="(item,index) in dataList">
                              <td>{{item.goods_name}}</td>
                              <td>{{item.brand_name}}</td>
                              <td>{{item.price}}</td>
                              <td>{{item.turnover}}</td>
                              <td>{{item.views}}</td>
                              <td>{{item.orders}}</td>
                              <td>{{item.playtimes}}</td>
                            </tr>
                          </tbody>
                        </table>
                        <pagination :tr-all="trAll" :page-cur="pageCur" :page-all="pageAll" :page-size="pageSize" @page-to="pageTo" ref="c1"></pagination>
                      </div>
                    </section>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- /.row -->
  </div>
  <!--*************************** content部分结束 ******************-->

  <!-- <footer class="footer text-center"> 2017 &copy; Ample Admin brought to you by themedesigner.in </footer> -->
</div>
{include file="common:js" /}
<!-- Custom tab JavaScript -->
<script type="text/javascript" src="/assets/ampleadmin-minimal/js/cbpFWTabs.js"></script>
<script type="text/javascript" src="/web/js/search_list.js"></script>
{include file="common:footer" /}
{include file="component:pagination" /}
<script type="text/javascript">
  var vm = new Vue({
    el: '#m_main',
    data() {
      return {
        total: {visit: '3000万',num: '100万',money: '200万',time: '00:05:39'}, //头部总数据
        industryList: [{id: 1,name: '行业1'}, {id: 2,name: '行业2'},{id:3,name:'行业3'}],//行业下拉列表
        searchUrl: "/dboard/report/ajaxList", //搜索接口
        draw: '', //校验字段
        iid: '', //行业id
        dataList: [], //搜索列表数据
        trAll: 0, //数据总数
        pageAll: 0, //页码总数
        pageCur: 1, //当前页
        pageSize: 10, //每页数量
        topList: [], //top10列表
      }
    },
    mounted() {
      this.getPageInfo();
      this.initSelectPicker();
      this.getList();
      // tab标签选择
      [].slice.call(document.querySelectorAll('.sttabs')).forEach(function(el) {
        new CBPFWTabs(el);
      });
    },
    methods: {
      // 下拉数据表动后重新实例化selectpicker
      initSelectPicker() {
        var that = this;
        $("#industry_id").on('shown.bs.select', function(e) {
          $('#industry_id').selectpicker('refresh');
        })
      },
      // 获取页面数据（头部数据，行业列表）
      getPageInfo() {
        var that = this;
        var params = {};
        axios.post('/dboard/report/getBaseInfo', params, {headers: {'X-Requested-with': 'XMLHttpRequest'}}).then(res => {
          if (res.data.Code == 0) {
            that.total = res.data.Data.total; //头部数据
            that.industryList = res.data.Data.industryList; //行业列表
          } else {
            alert(res.data.Msg);
          }
        }).catch(err => {})
      },
      //获取top10列表、所有商品数据列表
      getList() {
        this.getTopList();
        this.pageTo(1);
      },
      // 获取top10列表
      getTopList() {
        var that = this;
        var params = {
          iid: that.iid
        };
        axios.post('/dboard/report/top10', params, {headers: {'X-Requested-with': 'XMLHttpRequest'}}).then(res => {
          if (res.data.Code == 0) {
            that.topList = res.data.Data;
          } else {
            alert(res.data.Msg);
          }
        }).catch(err => {})
      },
      // 搜索当前页并渲染列表
      pageTo(page) {
        var that = this;
        var params = {
          iid: that.iid
        };
        searchList(that, page, params, (res) => {}, (fail) => {}, (error) => {})
      },
    }
  })
</script>
